<template>
    <input type="text" placeholder="What needs to be done" v-model="newItem"@keyup.enter="addItem">
    <ul>
        <li v-for="(item, index) in items" :key="index">
            {{ item }}
            <button @click="deleteItem(index)">X</button>
        </li>
    </ul>
    <p>总数：{{ count }}</p>
</template>

<script setup>
    import { reactive , computed } from 'vue';
    const items = reactive([])
    let newItem = '';
    let count = computed(()=>{
        return items.length;
    })
    let addItem = () => {
        items.push(newItem);
        // console.log(newItem);    
        newItem = ''; 
    }

    let deleteItem = (index) => {
        items.splice(index, 1);
    }




</script>

<style lang="css" scoped>
    *{
        text-align: center;
    }

    li {
        list-style: none;
    }
    input{
        margin-top: 50px;
        height: 50px;
        width: 300px;
        border-radius: 30px;
    }
    li{
        width: 200px;
        border: solid black 2px;
        margin: 10px auto;
        border-radius: 50px;
    }
</style>